<template>
  <div class="app-container">
    <template v-for="btn in btns">
      <el-button
        :type="btn.type"
        @click="handlerClick(btn)"
        :key="btn.txt"
        :icon="btn.ui"
        >{{ btn.txt }}</el-button
      >
    </template>

    <data-table
      :selectionChange="handleSelectionChange"
      v-on:search_enter="datatable_search_enter"
      :table="users"
    ></data-table>
  </div>
</template>

<style lang="scss" scoped>
.btns span + span::before {
  content: '、';
}
</style>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { all, datarow,destory } from '@/api/users'
import DataTable from '@/components/DataTable/index.vue'
import { UserModule } from '@/store/modules/user'
import { form } from '@/api/workflow'
@Component({
  name: 'sys-user',
  components: {
    DataTable
  }
})
export default class extends Vue {
  private listLoading = true

  private menuLs: any = []

  /**
   * 赋予的权限（按钮）
   */
  private btns = this.$router.currentRoute.meta.btns

  private users: any = {}

  /**
   * 搜索回车事件
   */
  private datatable_search_enter(cols: any, s: string) {
    this.listQuery.searchcols = Object.keys(cols).join(',')
    this.listQuery.s = s
    this.getUserAll()
  }
  /**
   * 选择改变事件
   */
  private slist: any[] = []
  private handleSelectionChange(list: any) {
    this.slist = list
  }
  private listQuery = { page: 1, size: 20, searchcols: '', s: '' }

  private async edrow(id: any = '') {
    var pms = { tableName: this.users.tableName, id: id }
    this.$router.push({
      path: '/sys/edrow',
      query: pms
    })
  }
  private async getUserAll() {
    const { data } = await all(this.listQuery)
    this.users = data
    this.listLoading = false
  }

  private btn_update() {
    if (this.slist && this.slist.length > 0) {
      this.edrow(this.slist[this.slist.length - 1].id)
    } else {
      this.$alert('请选择要操作的项！')
    }
  }
  private btn_add() {
    this.edrow()
  }

  private btn_delete() {
    if (this.slist && this.slist.length > 0) {
      this.$confirm('删除将不可恢复，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const {data} =await destory({tableName:this.users.tableName,ids:this.slist.map((it:any)=>it.id).join(',')})
          this.getUserAll();
        })
        .catch(() => {})
    } else {
      this.$alert('请选择要操作的项！')
    }
  }
  private handlerClick(btn: any) {
    var self: any = this
    if (!self[btn.click]) {
      this.$alert('没有"' + btn.click + '"方法的定义！')
    } else {
      self[btn.click]()
    }
  }

  created() {
    this.getUserAll()
  }
}
</script>
